@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-pagination';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.pageButtonSlider {
  @include composite-var($pagination-page-button-slider-container);

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  margin: 0;
  padding: 0;
  

  background-color: transparent;
  border: 0 solid transparent;
  outline: 0;
  outline-offset: 0;

  .pageButtonSliderDot {
    @include composite-var($pagination-page-button-slider-dot-page-default);

    background-color: $sys-neutral-decor-default;
  }

  &:hover {
    .pageButtonSliderDot {
      @include composite-var($pagination-page-button-slider-dot-page-interactions);

      background-color: $sys-neutral-decor-hovered;
    }
  }

  &:focus-visible {
    .pageButtonSliderDot {
      @include outline-var($container-focused-s);
      @include composite-var($pagination-page-button-slider-dot-page-interactions);

      background-color: $sys-neutral-decor-hovered;
      outline-color: $sys-available-complementary;
      outline-offset: $spacing-state-focus-offset;
    }
  }

  &:active {
    .pageButtonSliderDot {
      @include composite-var($pagination-page-button-slider-dot-page-interactions);

      background-color: $sys-neutral-decor-activated;
    }
  }


  &[data-activated] {
    .pageButtonSliderDot {
      @include composite-var($pagination-page-button-slider-dot-page-interactions);

      background-color: $sys-primary-accent-default;
    }

    &:hover {
      .pageButtonSliderDot {
        @include composite-var($pagination-page-button-slider-dot-page-interactions);

        background-color: $sys-primary-accent-default;
      }
    }

    &:focus-visible {
      .pageButtonSliderDot {
        @include composite-var($pagination-page-button-slider-dot-page-interactions);

        background-color: $sys-primary-accent-hovered;
      }
    }

    &:active {
      .pageButtonSliderDot {
        @include composite-var($pagination-page-button-slider-dot-page-interactions);

        background-color: $sys-primary-accent-hovered;
      }
    }
  }
}


